<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <search
        :head-search-data="headSearchData"
        :query-list="queryList"
        @queryCondition="search"
        @reportType="getreportType"
        @exportData="exportData"
      />
    </template>
    <template v-slot:content>
      <div style="height:40%;width: 100%;margin-bottom: 40px;">
        <echartsBar
          :id="enterEcharts"
          :name="echartsName"
          :class-name="enterEcharts"
          :options="options"
        />
      </div>
      <div style="height:40%;width: 100%;">
        <!-- <div style="margin-bottom: 15px;">物品出库明细</div> -->
        <el-table
          ref="tableData"
          v-loading="loading"
          class="table"
          :data="tableData"
          highlight-current-row
          stripe
          border
        >
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scoped">{{ scoped.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="productionLineName" label="产线名称" />
          <el-table-column label="加工量">
            <template slot-scope="scoped">
              <span>{{ scoped.row.output }}{{ scoped.row.outputUnitName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productMaterialName" label="加工产品" />
          <el-table-column prop="grade" label="加工产品等级" />
          <el-table-column prop="personName" label="操作人" />
          <el-table-column label="作业时间" min-width="260">
            <template slot-scope="scoped">
              <span>{{ scoped.row.startTime }}--{{ scoped.row.endTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- <Pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total-size="totalSize"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />-->
      </div>
      <!-- <div style="height:10%;width: 100%;">
        <div class="enterReport">
          <span>出库产品名称：有机肥</span>
          <span>出库仓库:7号仓库</span>
          <span>出库次数:7次</span>
          <span>出库总量:78034kg</span>
          <span>时间:2021年1月13日~2021年7月13日</span>
        </div>
      </div>-->
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/kong-new.vue";
import search from "../components/search.vue";
import echartsBar from "../components/echartsBar.vue";
import EnterWarehouseApi from "@/api/processing-management/process-management/processing-task";
import ProcessBatchApi from "@/api/processing-management/process-batch-manage/process-batch-creation/index";
// import Pagination from "@/components/Pagination";
import { mymixin } from "@/utils/mixin";
import { export2Excel } from "@/utils/vendor/index";
export default {
  name: "ProcessManageEnterReport",
  components: { BaseMainSlot, search, echartsBar },
  mixins: [mymixin],
  data() {
    return {
      reportType: "month",
      chartRowName: [],
      chartData: [],
      loading: false,
      echartsName: "产线作业次数",
      enterEcharts: "enterEcharts",
      headSearchData: [
        {
          type: "select",
          value: "processBatchType",
          placeholder: "作业类型",
          optionsData: [
            { value: "自主生产", label: "自主生产" },
            { value: "委托加工", label: "委托加工" }
          ]
        },
        {
          type: "select",
          value: "processBatchNo",
          placeholder: "选择批次",
          optionsData: []
        }
        // {
        //   type: "dateSelect",
        //   value: "date",
        //   placeholder: "入库时间"
        // }
      ],
      queryList: {
        processBatchType: "",
        processBatchNo: ""
      },
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      totalSize: 10,
      options: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: 50,
          right: 0,
          top: 50,
          bottom: 30
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            // name: 'Precipitation',
            min: 0,
            max: 15,
            interval: 3,
            axisLabel: {
              formatter: "{value} 次"
            }
          }
        ],
        series: [
          {
            name: "产线作业次数",
            type: "bar",
            barMaxWidth: "100",
            tooltip: {
              valueFormatter: function(value) {
                return value + "次";
              }
            },
            data: []
          }
        ]
      },
      outData: [
        { name: "产线名称", porp: "productionLineName" },
        { name: "加工量", porp: "output" },
        { name: "加工产品", porp: "productMaterialName" },
        { name: "加工产品等级", porp: "grade" },
        { name: "作业开始时间", porp: "startTime" },
        { name: "作业结束时间", porp: "endTime" }
      ]
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getBatchList();
  },
  methods: {
    search(queryData) {
      EnterWarehouseApi.queryChart({ ...queryData }).then(res => {
        if (res.code === 1) {
          this.chartRowName = [];
          this.chartData = [];
          for (let propName in res.data) {
            this.chartRowName.push(propName);
          }
          for (let propName in res.data) {
            this.chartData.push(res.data[propName]);
          }
          this.$set(this.options.xAxis[0], "data", this.chartRowName);
          this.$set(this.options.series[0], "data", this.chartData);
        }
      });
      let params = {
        page: 1,
        size: 999,
        entity: {
          ...queryData
        }
      };
      EnterWarehouseApi.getListByPageConditon(params).then(res => {
        if (res.code === 1) {
          this.tableData = res.data.content;
        }
      });
    },
    getreportType(e) {
      this.reportType = e;
    },
    // 导出
    exportData() {
      this.$confirm("确认导出数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(async () => {
          if (this.tableData.length > 0) {
            let a = "";
            switch (this.reportType) {
              case "month":
                a = "月";
                break;
              case "week":
                a = "周";
                break;
              case "day":
                a = "日";
                break;
            }
            export2Excel(this.outData, this.tableData, `加工作业${a}报表`, {
              title: "name",
              value: "porp"
            });
          } else {
            this.$message.error("没有数据");
          }
        })
        .catch(() => {});
    },
    // 获取批次列表
    getBatchList() {
      ProcessBatchApi.queryByConditionList({}).then(res => {
        if (res.code === 1) {
          let list = [];
          res.data.forEach(item => {
            list.push({
              name: item.processBatchName,
              value: item.processBatchNo
            });
          });
          this.headSearchData[1].optionsData = list;
        }
      });
    },
    handleSelectionChange() {},
    changePageSize() {},
    changeCurrentPage() {}
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
::v-deep .pagination {
  position: relative !important;
  top: 10px !important;
  left: 74%;
}
.table {
  position: relative;
}
.enterReport {
  display: flex;
  align-items: center;
  border: 1px solid #0ea9c47b;
  height: 100%;
  justify-content: space-around;
}
</style>
